<template>
  <div v-if="visible" class="c-header-container bg-color border-dark-color">
    <div class="header-left" @click="back">
      <van-icon name="arrow-left" />
    </div>
    <div class="header-center">{{ title }}</div>
    <div class="header-right"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "CHeader",
  props: {
    title: {
      type: String,
      default: ""
    }
  },
  computed: {
    ...mapState({
      visible: state => state.header.visible
    })
  },
  mounted() {},
  methods: {
    back() {
      this.$router.back();
    }
  }
};
</script>

<style scoped lang="scss">
@import "assets/css/_layout";
.c-header-container {
  // padding: 40px 30px 0;
  padding: 0 30px;
  box-sizing: border-box;
  position: fixed;
  width: 640px;
  height: 96px;
  z-index: 1;

  @include flex($justify-content: space-between, $align-items: center);
  .header-left {
    width: 50px;
  }
  .header-left,
  .header-right {
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
  }
  .arrow-left,
  .hide-back {
    transform: rotate(180deg);
    width: 20px;
    height: 36px;
  }
  .arrow-right {
    width: 37px;
    height: 36px;
  }
  .header-center {
    font-size: 30px;
    color: #000000;
  }
}
</style>
